<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">点击获取数据</button>
</body>
<script src="./jquery-1.12.4.js "></script>
<script>
    $(function () {
        // jquery调用 ajax方法
        //格式： $.ajax({
        //    参数：
        //        type：请求方式的格式  get  post。。。
        //        url：请求的地址
        //        async：是否是异步，默认表示异步
        //        data：发送到服务器的数据
        //        dataType：预期服务器返回的数据类型
        //        contentType：设置请求头
        //        success：请求成功时调用此函数
        //        error：请求失败时调用此函数
        // })
        $('#btn').on('click', function () {
            $.ajax({
                type: 'get',
                url: 'data.txt',//请求的接口路径
                data: {

                },
                dataType: 'json',//自动打包成想要的json格式
                success: function (data) {
                    console.log(data);
                    for (var i = 0; i < data.length; i++) {
                        // 获取data里面的数据
                        var user = data[i]
                        // 创建ul
                        var ul = $("<ul><li>" + user.userId + "</li><li>" + user.userName + "</li><li>" + user.userAge + "</li></ul>")
                        console.log(ul);
                        $('body').append(ul)
                    }
                },error:function(){
                    alert('请求失败')
                }
            })
            // $.get()/$.post()方法
            // $.post('data.json',{},function(data){
            //         console.log(data);
            //         for (var i = 0; i < data.length; i++) {
            //             // 获取data里面的数据
            //             var user = data[i]
            //             // 创建ul
            //             var ul = $("<ul><li>" + user.userId + "</li><li>" + user.userName + "</li><li>" + user.userAge + "</li></ul>")
            //             console.log(ul);
            //             $('body').append(ul)
            //         }
            // })
        })
    })

</script>

</html>